<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
  <template>
    <el-page-header @back="goBack"  :content="trainNum+'次列车 途径站管理'" >
    </el-page-header>
    <el-divider></el-divider>
    <el-form :inline="true" class="demo-form-inline" >
      <el-form-item>
        <el-button type="primary" plain @click="dialogFormVisible = true" style="margin-left: 80%">新增</el-button>
      </el-form-item>
    </el-form>

    <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            ref="multipleTable"
            tooltip-effect="dark"
            @selection-change="handleSelectionChange">
      <el-table-column
              type="index"
              width="55">
      </el-table-column>
      <el-table-column
              prop="station"
              label="到站"
              width="180">
      </el-table-column>
      <el-table-column
              prop="arriveTime"
              label="到站时间"
              width="180">
        <template slot-scope="scope">
          {{ scope.row.arriveTime }}<sup>+{{ scope.row.arriveDay }}天</sup>
        </template>
      </el-table-column>
      <el-table-column
              prop="departureTime"
              label="出站时间"
              width="180">
        <template slot-scope="scope">
          {{ scope.row.departureTime }}<sup>+{{ scope.row.departureDay }}天</sup>
        </template>
      </el-table-column>
      <el-table-column
              prop="distance"
              label="到起点的距离(公里)"
              width="180">
      </el-table-column>
      <el-table-column
              align="center"
              label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button type="primary" @click="dialogFormVisible1 = true;handleEdit(scope.$index, scope.row)">修改</el-button>
            <el-button type="danger" @click="deleteById(scope.$index, scope.row)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
  </template>

  <el-dialog title="添加途径车站"
             :visible.sync="dialogFormVisible" width="50%"
             :close-on-click-modal="false"
             :before-close="cleanModel">
    <el-form :model="createForm" :rules="rules">
      <el-form-item label="到达站" :label-width="'100px'" prop="station">
        <el-select v-model="createForm.station" filterable placeholder="请选择">
          <el-option
                  v-for="item in stations"
                  :key="item.nameInEnglish"
                  :label="item.nameInChinese"
                  :value="item.nameInChinese">
            <span style="float: left">{{ item.nameInChinese }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.nameInEnglish }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-row>
      <el-col :span="11">
      <el-form-item label="到达时间" :label-width="'100px'" prop="arriveTime">
        <el-time-picker
                v-model="createForm.arriveTime"
                :picker-options="{
                            format: 'HH:mm:ss'
                        }"
                placeholder="点击选择到达时间">
        </el-time-picker>
      </el-form-item>
      </el-col>
      <el-col :span="11">
      <el-form-item label="到站日" :label-width="'120px'" prop="arriveDay">
        <el-input-number v-model="createForm.arriveDay" controls-position="right" :min="0" :max="10"></el-input-number>
      </el-form-item>
      </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
      <el-form-item label="出发时间" :label-width="'100px'" prop="departureTime">
        <el-time-picker
                v-model="createForm.departureTime"
                :picker-options="{
                            format: 'HH:mm:ss'
                        }"
                placeholder="点击选择出发时间">
        </el-time-picker>
      </el-form-item>
        </el-col>
        <el-col :span="11">
      <el-form-item label="出站日" :label-width="'120px'" prop="departureDay">
        <el-input-number v-model="createForm.departureDay" controls-position="right" :min="0" :max="10"></el-input-number>
      </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="到起点站的距离" :label-width="'130px'" prop="distance">
        <div style="display: flex; align-items: center; gap: 8px">
        <el-input-number v-model="createForm.distance" :min="1" :max="3000" label="描述文字"></el-input-number>
          <span>单位：千米</span>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cleanModel">取 消</el-button>
      <el-button type="primary" @click="create">确 定</el-button>
    </div>
  </el-dialog>

  <el-dialog title="修改车站信息"
             :visible.sync="dialogFormVisible1" width="50%"
             :close-on-click-modal="false"
             :before-close="cleanModel">
    <el-form :model="createForm" :rules="rules">
      <el-form-item label="到达站" :label-width="'100px'" prop="station">
        <el-select v-model="createForm.station" filterable placeholder="请选择">
          <el-option
                  v-for="item in stations"
                  :key="item.nameInEnglish"
                  :label="item.nameInChinese"
                  :value="item.nameInChinese">
            <span style="float: left">{{ item.nameInChinese }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.nameInEnglish }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="11">
          <el-form-item label="到达时间" :label-width="'100px'" prop="arriveTime">
            <el-time-picker
                    v-model="createForm.arriveTime"
                    :picker-options="{
                            format: 'HH:mm:ss'
                        }"
                    placeholder="点击选择到达时间">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="到站日" :label-width="'120px'" prop="arriveDay">
            <el-input-number v-model="createForm.arriveDay" controls-position="right" :min="0" :max="10"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item label="出发时间" :label-width="'100px'" prop="departureTime">
            <el-time-picker
                    v-model="createForm.departureTime"
                    :picker-options="{
                            format: 'HH:mm:ss'
                        }"
                    placeholder="点击选择出发时间">
            </el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="出站日" :label-width="'120px'" prop="departureDay">
            <el-input-number v-model="createForm.departureDay" controls-position="right" :min="0" :max="10"></el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="到起点站的距离" :label-width="'130px'" prop="distance">
        <div style="display: flex; align-items: center; gap: 8px">
          <el-input-number v-model="createForm.distance" :min="1" :max="3000" label="描述文字"></el-input-number>
          <span>单位：千米</span>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cleanModel">取 消</el-button>
      <el-button type="primary" @click="update">确 定</el-button>
    </div>
  </el-dialog>

</div>
</body>

<script src="../../../js/axios-0.18.0.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

  new Vue({
    el: '#app',
    mounted(){
      this.trainNum=localStorage.getItem("trainNumRoute");
      this.createForm.trainNum=localStorage.getItem("trainNumRoute");
      this.select();
      this.selectStations();
    },
    data() {
      return {
        //activeIndex: '1',
        //activeIndex2: '1',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        trainNum: 'G100',
        rules: {
          station: [
            { required: true, message: '请选择到达站', trigger: ['blur', 'change'] }
          ],
          arriveTime: [
            { required: true, message: '请选择到达时间', trigger: ['blur', 'change'] }
          ],
          arriveDay: [
            { required: true, message: '请输入到站日', trigger: ['blur', 'change'] },
            { type: 'number', min: 0, max: 10, message: '到站日必须在0-10之间', trigger: ['blur', 'change'] }
          ],
          departureTime: [
            { required: true, message: '请选择出发时间', trigger: ['blur', 'change'] },
            {
              validator: (rule, value, callback) => {
                if (!value || !this.createForm.arriveTime) {
                  callback();
                  return;
                }

                // 创建纯时间对象（不考虑日期）
                const createTimeObj = (date) => {
                  return {
                    hours: date.getHours(),
                    minutes: date.getMinutes(),
                    seconds: date.getSeconds(),
                    getTime() {
                      return this.hours * 3600 + this.minutes * 60 + this.seconds;
                    }
                  };
                };

                const arriveTime = createTimeObj(new Date(this.createForm.arriveTime));
                const departTime = createTimeObj(new Date(value));

                // 如果出站日等于到站日，才需要比较具体时间
                if (this.createForm.arriveDay === this.createForm.departureDay) {
                  if (departTime.getTime() <= arriveTime.getTime()) {
                    callback(new Error('出发时间必须晚于到达时间'));
                    return;
                  }
                }
                callback();
              },
              trigger: ['blur', 'change']
            }
          ],

          departureDay: [
            { required: true, message: '请输入出站日', trigger: ['blur', 'change'] },
            { type: 'number', min: 0, max: 10, message: '出站日必须在0-10之间', trigger: ['blur', 'change'] },
            {
              validator: (rule, value, callback) => {
                if (value < this.createForm.arriveDay) {
                  callback(new Error('出站日不能早于到站日'));
                } else if (value === this.createForm.arriveDay) {
                  // 当出站日等于到站日时，触发departureTime的验证
                  this.$refs.createForm.validateField('departureTime');
                  callback();
                } else {
                  callback();
                }
              },
              trigger: ['blur', 'change']
            }
          ],
          distance: [
            { required: true, message: '请输入到起点距离', trigger: 'blur' },
            { type: 'number', min: 1, max: 3000, message: '距离必须在1-3000千米之间', trigger: 'blur' }
          ]
        },
        stations: [{
          id: '1',
          nameInEnglish: 'Beijing',
          nameInChinese: '北京'
        }, {
          id: '2',
          nameInEnglish: 'Shanghai',
          nameInChinese: '上海'
        }, {
          id: '3',
          nameInEnglish: 'Nanjing',
          nameInChinese: '南京'
        }, {
          id: '4',
          nameInEnglish: 'Chengdu',
          nameInChinese: '成都'
        }, {
          id: '5',
          nameInEnglish: 'Shenzhen',
          nameInChinese: '深圳'
        }, {
          id: '6',
          nameInEnglish: 'Guangzhou',
          nameInChinese: '广州'
        }],
        tableData: [{
          id: '1',
          trainNum: 'G100',
          station: '临港东站',
          arriveTime: '08:12:00',
          departureTime: '10:22:00',
          arriveDay: '0',
          departureDay: '0',
          distance: '128'
        }, {
          id: '2',
          trainNum: 'G100',
          station: '临港东站',
          arriveTime: '08:12:00',
          departureTime: '10:22:00',
          arriveDay: '0',
          departureDay: '1',
          distance: '128'
        }, {
          id: '3',
          trainNum: 'G100',
          station: '临港东站',
          arriveTime: '08:12:00',
          departureTime: '10:22:00',
          arriveDay: '2',
          departureDay: '3',
          distance: '128'
        }, {
          id: '4',
          trainNum: 'G100',
          station: '临港东站',
          arriveTime: '08:12:00',
          departureTime: '10:22:00',
          arriveDay: '0',
          departureDay: '0',
          distance: '128'
        }],
        createForm:{
          trainNum: '',
          station: null,
          arriveTime: null,
          departureTime: null,
          arriveDay: 0,
          departureDay: 0,
          distance: 0
        },
        multipleSelection: [],
        selectedIds: []
      }
    },
    methods: {

      cleanModel(){
        this.createForm={
          trainNum: '',
          station: null,
          arriveTime: null,
          departureTime: null,
          arriveDay: 0,
          departureDay: 0,
          distance: 0
        };
        this.createForm.trainNum=this.trainNum;
        this.selectedIds=[];
        this.dialogFormVisible=false;
        this.dialogFormVisible1=false;
      },

      goBack(){
        localStorage.clear();
        window.location.href='list.html';
      },

      selectAgain(){
        this.select();
      },

      handleCurrentChange(val) {
        this.currentPage1=val;
        this.select();
      },

      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleEdit(index,row) {

          this.createForm = {
            id: this.tableData[index].id,
            trainNum: this.tableData[index].trainNum,
            station: this.tableData[index].station,
            arriveTime: new Date('2000-01-01T' + this.tableData[index].arriveTime),
            departureTime: new Date('2000-01-01T' + this.tableData[index].departureTime),
            arriveDay: this.tableData[index].arriveDay,
            departureDay: this.tableData[index].departureDay,
            distance: this.tableData[index].distance
          };
      },


      selectStations(){
        var _this=this;
        axios({
          method:"get",
          url:"http://localhost:8080/station/selectAll",
        }).then(function (resp) {
          if(resp.data.code === 1){
            _this.stations=resp.data.data;
          }
          else {
            _this.$message({
              showClose: true,
              message: resp.data.msg,
              type: 'error'
            });
          }
        })
      },

      select(){
        var _this=this;
        axios({
          method:"get",
          url:"http://localhost:8080/arrive/select",
          params: {
            trainNum: this.trainNum,
          },
        }).then(function (resp) {
          if(resp.data.code!==1){
            _this.$message({
              showClose: true,
              message: '404接口错误！',
              type: 'error'
            });
          }else{
            _this.tableData=resp.data.data;
          }

        })
      },
      create(){
        var _this=this;
        axios({
          method:"put",
          url:"http://localhost:8080/arrive/create",
          data: _this.createForm
        }).then(function (resp) {
          if(resp.data.code === 1){
            _this.$message({
              showClose: true,
              message: '创建成功！',
              type: 'success'
            });
            _this.dialogFormVisible=false;
            _this.cleanModel();
            _this.selectAgain();
          }else {
            _this.$message({
              showClose: true,
              message: resp.data.msg,
              type: 'error'
            });
          }
        });

      },
      deleteById(index,row){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var id = this.tableData[index].id;
          var _this = this;
          axios({
            method: "delete",
            url: "http://localhost:8080/arrive",
            params: { id }
          }).then(function (resp) {
            if (resp.data.code === 1) {
              _this.select();
              _this.$message({
                message: '删除成功！',
                type: 'success'
              });

            }else {
              _this.$message({
                showClose: true,
                message: resp.data.msg,
                type: 'error'
              });
            }

          })
          this.cleanModel();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      deleteByIds(){
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for(let i=0;i<this.multipleSelection.length;i++){
            let selectionElement =this.multipleSelection[i];
            this.selectedIds[i]=selectionElement.id;
          }
          var _this=this;
          axios({
            method:"post",
            url:"http://localhost:8080/arrive/deleteByIds",
            data:_this.selectedIds
          }).then(function (resp) {
            if(resp.data.code===1){
              _this.select();
              _this.$message({
                message: '删除成功！',
                type: 'success'
              });
            }else {
              _this.$message({
                showClose: true,
                message: resp.data.msg,
                type: 'error'
              });
            }

          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

      update(){
        var _this=this;
        axios({
          method:"put",
          url:"http://localhost:8080/arrive/update",
          data: _this.createForm
        }).then(function (resp) {
          if(resp.data.code === 1){
            _this.$message({
              showClose: true,
              message: '修改成功！',
              type: 'success'
            });
            _this.dialogFormVisible1=false;
            _this.cleanModel();
            _this.select();

          }else {
            _this.$message({
              showClose: true,
              message: resp.data.msg,
              type: 'error'
            });
          }
        });

      }
    }
  })
</script>



</html>